﻿@model ZeroFramework.IdentityServer.API.Models.Accounts.ForgotPasswordViewModel
@{
    Layout = null;
    ViewData["Title"] = "Forgot your password?";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>零度重置密码</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body class="account-page" style="background-color:#0072c6">
    <div class="card p-3">
        <div class="card-body">
            <h4 class="text-center mb-5 card-title text-uppercase">重置密码</h4>
            <form id="account" method="post" autocomplete="off">
                <div class="form-group">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                </div>
                <div class="input-group mb-4  input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-phone" style="font-size:14px;"></i></span>
                    </div>
                    <input asp-for="PhoneNumber" class="form-control" aria-required="true" autocomplete="new-phone-number" />
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="PhoneNumber"></span>
                    </div>
                </div>
                <div class="input-group mb-4  input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-key" style="font-size:12px;"></i></span>
                    </div>
                    <input asp-for="Password" class="form-control" aria-required="true" autocomplete="new-password" />
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="Password"></span>
                    </div>
                </div>
                <div class="input-group mb-4  input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-key" style="font-size:12px;"></i></span>
                    </div>
                    <input asp-for="ConfirmPassword" class="form-control" aria-required="true" autocomplete="new-confirm-password" />
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="ConfirmPassword"></span>
                    </div>
                </div>
                <div class="input-group mb-4 input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-keyboard-o" style="font-size:12px;"></i></span>
                    </div>
                    <input asp-for="ConfirmedCode" class="form-control" aria-required="true" autocomplete="new-confirmed-code" />
                    <div class="input-group-append">
                        <input class="btn btn-success" type="button" id="btn-send-code" onclick="sendCode()" value="发送验证码" />
                    </div>
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="ConfirmedCode"></span>
                    </div>
                </div>
                <div class="form-group mb-5">
                    <button id="login-submit" type="submit" class="btn btn-primary btn-lg btn-block">重置密码</button>
                </div>
            </form>
            <div class="form-group text-center">
                <p>
                    已有账号？ <a asp-action="Login" asp-route-redirectUrl="@ViewData["ReturnUrl"]" class="mr-4">登录</a>
                    没有账号？ <a asp-action="Register" asp-route-redirectUrl="@ViewData["ReturnUrl"]">注册</a>
                </p>
            </div>
        </div>
    </div>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script>
        var countdown = 60;
        var sending = false;

        $(function () {
            countdown = localStorage.getItem("sendCodeCountdown");

            if (countdown > 0) {
                sending = true;
                var obj = $("#btn-send-code");
                obj.attr("disabled", true);
                obj.val("重新发送(" + countdown + ")");
                setTime(obj);
            }

            $(window).on('beforeunload unload', function () {
                if (sending) {
                    console.log(countdown);
                    localStorage.setItem("sendCodeCountdown", countdown);
                }
                if (!sending) {
                    console.log(countdown);
                    localStorage.setItem("sendCodeCountdown", 0);
                }
            });
        });

        function setTime(obj) { //发送验证码倒计时
            if (countdown == 0) {
                obj.attr('disabled', false);
                obj.val("发送验证码");
                countdown = 60;
                sending = false;
                return;
            } else {
                obj.attr('disabled', true);
                obj.val("重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(function () {
                setTime(obj);
            }, 1000)
        }

        function sendCode() {
            if ($('#PhoneNumber').valid()) {
                countdown = 60;
                $.ajax({
                    url: '/Account/SendCode',
                    type: "POST",
                    dataType: "text",
                    data: {
                        phoneNumber: $("#PhoneNumber").val(),
                    },
                    success: function () {
                        sending = true;
                        setTime($("#btn-send-code"));
                    }
                });
            }
        }
    </script>
</body>
</html>